<template>
	<view class="page">
		<!-- 顶部 -->
		<view class="top">{{className}}</view>
		<view class="schedule">
			<view class="schedule_title">
				<view class="week">
					<image src="../../static/pre.png" mode="" @click="pre()"></image>
					<text>{{week.name}}</text>
					<image src="../../static/next.png" mode="" @click="next()"></image>
				</view>
				<view class="date">
					<text>{{date1}}</text>
					<view class="date_today" @click="jumpToEditor">
						<text>编辑</text>
					</view>
				</view>
				<view class="weekend">
					<text>一</text>
					<text>二</text>
					<text>三</text>
					<text>四</text>
					<text>五</text>
					<text>六</text>
					<text>日</text>
				</view>
				<view class="weekend_nm">
					<view class="week_item" v-for="(item,index) in tableData" :key="index" @click="jumpTheDay(index)">
						<view :class="item.isToday?'today':'notToDay'">
							<view :class="item.select?'selectDay':'week_item'">
								{{item.day}}
							</view>
						</view>
					</view>
				</view>
			</view>
			
			
		<view style="display: flex;">
			<view class="course_table" v-for="(item, day) in dayList" :key="day">
				<view class="course_section" v-for="(item, section) in item" :key="section">
					<text class="text_time_section">
						{{item.time_section}}
					</text>
					
					<text class="text_course_name">
						{{item.course_name}}
					</text>
					
					<text class="text_time">
						{{item.course_time}}
					</text>
					
					<text class="text_classroom">
						{{item.classroom}}
					</text>
					
					
				</view>
			</view>
		</view>
		</view>
	</view>
</template>

<script>
	import cloudbase from '@cloudbase/js-sdk';
	
	const db = cloudbase.database();
	export default {
		data() {
			return {
				className: '',
				dayList:[
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
				],
				
				type: getApp().globalData.userInfo.type,
				week: {
					name: '本周',
					id: 1
				},
				preDisable: false,
				nextDisable: false,
				tableData:[],
				date: [],
				lastDate:[],
				nextDate:[],
				date1: '',
				classCources: '',
				classId: ''
			}
		},
		created() {
			this.getDay();
			this.getLastWeek();
			this.getNextWeek();
		},
		watch:{
			'week.id':function(){
				if(this.week.id == 0){
					this.tableData = this.lastDate;
				}
				else if(this.week.id == 1){
					this.tableData = this.date;
				}
				else{
					this.tableData = this.nextDate;
				}
			}
		},
		onLoad(e) {
			if(e.item){
				let classCources = JSON.parse(e.item).courses;
				let classId = JSON.parse(e.item)._id;
				this.classCources = classCources;
				this.classId = classId;
			}
		},
		onShow() {
			console.log('查询课表');
			// 查询课表
			let ifFlush = getApp().globalData.ifFlush;
			if(ifFlush){
				db.collection('class').where({
					_id: this.classId
				}).get().then(res=>{
					this.getSchedules(res.data[0].courses);
					this.classCources = res.data[0].courses;
				})
				getApp().globalData.ifFlush = false;
			}else{
				this.getSchedules(this.classCources);
			}
		},
		methods: {
			// 获取课表内容
			getSchedules: function(classCources){
				let day = 0;
				let index = 0;
				let course_time = '';
				// 清空课表
				this.dayList = [
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
					[
						{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},{
							time_section:'',
							course_name:'',
							course_time:'',
							classroom:''
						},
					],
				],
				
				classCources.forEach(course=>{
					let classroom = course.room;
					// 获取课程名称
					db.collection('course').where({
						_id: course._id
					}).field({
						name: true
					}).get().then(res=>{
						let course_name = res.data[0].name;
						// 依次获取上课时间
						course.time.forEach(weekTime=>{
							weekTime.forEach(time=>{
								switch(time){
									case '第一节':
										index = 0;
										course_time = '08:00~10:00';
										break;
									case '第二节':
										index = 1;
										course_time = '10:00~12:00';
										break;
									case '第三节':
										index = 2;
										course_time = '14:00~16:00';
										break;
									case '第四节':
										index = 3;
										course_time = '16:00~18:00';
										break;
									case '第五节':
										index = 4;
										course_time = '19:00~21:00';
										break;
								}
								this.dayList[day][index].time_section = time;
								this.dayList[day][index].course_name = course_name;
								this.dayList[day][index].classroom = classroom;
								this.dayList[day][index].course_time = course_time;
							})
							day++;
						})
						day = 0;
					})
				})
			},
			jumpToEditor: function(){
				uni.navigateTo({
					url: '../chooseContent/chooseContent?courseItem=' + JSON.stringify(this.classCources) + '&classId=' + this.classId
				})
			},
			jumpToMyHomework: function() {
				uni.navigateTo({
					url: '../myHomework/myHomework?type=' + this.type
				})
			},
			jumpToAttendance: function() {
				uni.navigateTo({
					url: '../attendance/attendance?type=' + this.type
				})
			},
			jumpToUpdate: function(item){
				// console.log(item);
				uni.navigateTo({
					url: '../scheduleManage/scheduleManage?schedule=' + JSON.stringify(item)
				})
			},
			pre: function() {
				if (this.week.id == 1) {
					this.week.id = 0;
					this.week.name = '上周'
					this.preDisable = true;
				} else if (this.week.id == 2) {
					this.week.id = 1;
					this.week.name = '本周';
					this.nextDisable = false;
					this.preDisable = false;
				}
			},
			next: function() {
				if (this.week.id == 0) {
					this.week.id = 1;
					this.week.name = '本周',
						this.preDisable = false;
					this.nextDisable = false;
				} else if (this.week.id == 1) {
					this.week.id = 2;
					this.week.name = '下周',
						this.nextDisable = true;
					this.preDisable = false;
				}
			},
			// 获取当前周日期
			getDay: function() {
				this.date = [];
				let date = new Date();
				let weekIndex = date.getDay();
				let data = [];
				// console.log(weekIndex);
				for (let i = weekIndex - 1; i >= 0; i--) {
					data.push(this.getWeek(-i));
				}
				for (let i = 1; i <= 7 - weekIndex; i++) {
					data.push(this.getWeek(i));
				}
				// console.log(data);
				data.forEach(v => {
					let i = new Object();
					let result = v.split('/');
					i.year = result[0];
					i.month = result[1];
					i.day = result[2];
					i.select = false;
					if (v == this.getWeek(0)) {
						i.isToday = true;
						this.date1 = result[0] + '/' + result[1];
					} else {
						i.isToday = false;
					}

					this.date.push(i);
				})
				this.tableData = this.date;
				// console.log(this.date);
			},
			// 获取上周日期
			getLastWeek:function(){
				let data = [];
				for(let i = -7;i<=-1;i++){
					data.push(this.getWeek(i));
				}
				this.lastDate = [];
				data.forEach(v => {
					let i = new Object();
					let result = v.split('/');
					i.year = result[0];
					i.month = result[1];
					i.day = result[2];
					i.select = false;
					i.isToday = false;
				
					this.lastDate.push(i);
				})
			},
			// 获取下周日期
			getNextWeek:function(){
				let data = [];
				for(let i = 8;i<=14;i++){
					data.push(this.getWeek(i));
				}
				this.nextDate = [];
				data.forEach(v => {
					let i = new Object();
					let result = v.split('/');
					i.year = result[0];
					i.month = result[1];
					i.day = result[2];
					i.select = false;
					i.isToday = false;
				
					this.nextDate.push(i);
				})
			},
			// 获取日期
			getWeek: function(day) {
				let today = new Date();

				let milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;

				today.setTime(milliseconds);

				let tYear = today.getFullYear();

				let tMonth = today.getMonth();

				let tDate = today.getDate();

				tMonth = tMonth + 1;

				tDate = tDate;

				return tYear + "/" + tMonth + "/" + tDate;

			},
			// 跳转到那天并获取日程
			jumpTheDay: function(index) {
				for (let i in this.tableData) {
					this.tableData[i].select = false;
					if (index == i) {
						this.tableData[i].select = true;
						this.date1 = this.tableData[i].year +'/'+this.tableData[i].month;
					}
				}
			}
		}
	}
</script>

<style>
	page{
		background-color: #F3F5F7;
	}
	.page {
		width: 750rpx;
		height: 1280rpx;
		/* height: 1020rpx; */
		/* padding-bottom: 60px; */
		display: flex;
		flex-direction: column;
		box-sizing: border-box;
	}
	
	.top {
		width: 100%;
		/* height: 120rpx; */
		display: flex;
		/* box-sizing: border-box; */
		justify-content: center;
		/* text-align: center; */
		font-weight: 500;
		font-size: 36rpx;
		color: #FFAA5F;
		margin: 20rpx 0;
	}

	.choice_item image {
		width: 80rpx;
		height: 80rpx;
		vertical-align: middle;
	}

	.schedule {
		width: 702rpx;
		height: 1500rpx;
		border-radius: 16rpx;
		margin-top: 27rpx;
		margin-left: auto;
		margin-right: auto;
		border-radius: 70rpx;
		background-color: #FFFFFF;
	}

	.schedule_title {
		width: 601rpx;
		height: 240rpx;
		margin-top: 37rpx;
		margin-left: auto;
		margin-right: auto;
	}

	.week {
		width: 601rpx;
		height: 57rpx;
		text-align: center;
		font-size: 35rpx;
		line-height: 57rpx;
		display: inline-block;
	}

	.week image {
		width: 57rpx;
		height: 57rpx;
		font-size: 35rpx;
		line-height: 57rpx;
		display: inline-block;
		vertical-align: middle;
		margin-left: 14rpx;
		margin-right: 14rpx;
		background-color: #FFFFFF !important;
		border: none !important;
	}

	.date {
		width: 601rpx;
		height: 46rpx;
		margin-top: 10rpx;
		margin-right: auto;
		margin-left: auto;
		font-size: 33rpx;
		line-height: 46rpx;
		color: #707070;
	}

	.date_today {
		float: right;
		width: 71rpx;
		height: 46rpx;
		border-radius: 10rpx;
		background-color: #FFF7E6;
		color: #FD973F;
		font-size: 19rpx;
		line-height: 46rpx;
		text-align: center;
	}

	.weekend {
		/* background-color: #ff0000; */
		margin-left: 0rpx;
		/* width: 650rpx; */
		height: 57rpx;
		/* margin-right: auto; */
		font-size: 18rpx;
		line-height: 57rpx;
		color: #BEBEBE;
		display: flex;
		justify-content: space-between;
	}

	.weekend text {
	/* 	margin-left: 24rpx;
		margin-right: 50rpx; */
		text-align: center;
		display: inline-block;
		width: 40rpx;
	}

	.weekend_nm {
		/* background-color:#ff007f; */
		/* width: 650rpx; */
		height: 57rpx;
		margin-left: auto;
		margin-right: auto;
		font-size: 26rpx;
		line-height: 57rpx;
		color: #BEBEBE;
		display: flex;
		justify-content: space-between;
		
	}

	.week_item {
		width: 40rpx;
		height: 57rpx;
		border-radius: 10rpx;
/* 		margin-right: 59rpx; */
		/* background-color: #0000FF; */
		/* background-color: #FFF7E6; */
		text-align: center;
		display: inline-block;
	}

	.today {
		background-color: #FFF7E6;
		border-radius: 10rpx;
		color: #FD973F;
	}

	.notToDay {
		background-color: #FFFFFF;
		border-radius: 10rpx;
		color: #707070;
	}

	.selectDay {
		background-color: #FD973F;
		border-radius: 10rpx;
		color: #FFFFFF;
	}
	
	.course_table{
		margin-top: 5rpx;
		margin-left: 13rpx;
		border: #FFFFFF;
		border-radius: 16rpx;
		width: 86rpx;
		height: 900rpx;
		
	}
	
	.course_section{
		width: 86rpx;
		height: 170rpx;
		margin-top: 17rpx;
		border-radius: 16rpx;
		background-color: #efefef;
		
	}
	
	/* 每一小节课的文字内容 */
	.text_time_section{
		font-size: 10px;
		font-weight: 1000;
		margin-top: 16rpx;
		margin-left: 15rpx;
		/* display: flex; */
		color: #000000;
	}
	
	/* 课程名称 */
	.text_course_name{
		margin-top: 4rpx;
		font-size: 9px;
		font-weight:300;
		justify-content: center;
		display: flex;
		text-align: center;
	}
	/* 上课时间 */
	.text_time{
		margin-top: 20rpx;
		font-size: 7px;
		color: #94bbf9;
		justify-content: center;
		display: flex;
	}
	
	.text_classroom{
		font-size: 7px;
		margin-top: 7rpx;
		color: #94bbf9;
		justify-content: center;
		display: flex;
	}
	
	
</style>